
<h3>0. 使用svg标签</h3>
<svg version="1.1"
    preserveAspectRatio="xMinYMin meet"
    viewBox="0 0 660 342"
    width="660" height="342"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    style="display:block;width:330px;height:240px" >

    <image xlink:href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="660" height="342"/>

    <rect x="2" y="284" width="656" height="58" fill="rgba(0,0,0,0.6)" stroke-width="1" ></rect>

    <text text-anchor="start"
        font-family="Microsoft Yahei, sans-serif" font-size="28"
        x="20" y="322" fill="#fff">这是百度</text>
    <text text-anchor="end"
        font-family="Microsoft Yahei, sans-serif" font-size="28"
        x="640" y="322" fill="#fff">😄</text>
</svg>

<h3>1. 使用img标签</h3>
<img src="./test.svg" style="display:block;width:330px;height:240px" />

<h3>2. 使用iframe标签</h3>
<iframe src="./test.svg" style="display:block;width:330px;height:240px;border:none;" ></iframe>

<h3>3. 使用embed标签</h3>
<embed src="./test.svg" style="display:block;width:330px;height:240px" />

<h3>4. 使用object标签</h3>
<object type="image/svg+xml" data="./test.svg" style="display:block;width:330px;height:240px" >
    <param name="src" value="./test.svg" >
</object>


<h3>5. 使用div标签的背景图片</h3>
<div style="display:block;width:330px;height:240px;background: url(./test.svg) no-repeat;background-size: 100%;" ></div>


<h3>6. 使用picture标签</h3>
<picture >
    <source srcset="./test.svg"  type="image/svg+xml">
    <img src="./test.png" style="display:block;width:330px;height:240px">
</picture>

